<template>
  <div class="contianer">
    <h3 class="title">企业名称：{{companyName}}-{{goodsName}}</h3>
    <div class="list">
      <label class="list-item">
        <i>所属商品计划：</i>
      </label>
      <el-select v-model="goodsInfo.ptGoodsPlanId" placeholder="请选择">
        <el-option v-for="item in goodsPlanList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="list">
      <label class="list-item require">
        <i>商品名称：</i>
      </label>
      <el-input placeholder="请输入商品名称" v-model="goodsInfo.name"></el-input>
    </div>
    <div class="list">
      <label class="list-item">
        <i>商品简介：</i>
      </label>
      <el-input
        type="textarea"
        :rows="2"
        size="medium"
        placeholder="请输入内容"
        v-model="goodsInfo.remark"
      ></el-input>
    </div>
    <div class="list">
      <span></span>
      <label for class="list-item require">
        <i>商品生效日期：</i>
      </label>
      <el-date-picker
        v-model="goodsInfo.beginTime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
      />
      <span></span>
      <label for class="list-item require">
        <i>商品失效日期：</i>
      </label>
      <el-date-picker
        v-model="goodsInfo.endTime"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
      />
    </div>
    <div class="pl">
      <p>商品绑定优加服务：</p>
      <el-checkbox-group v-model="checkedServes" @change="handleCheckedServesChange">
        <el-checkbox v-for="serve in servesList" :label="serve" :key="serve">{{serve}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="pl" v-if="goodsInfo.ptCashPrePay">
      <p>押金垫付设置</p>
      <serve-address ref="cashAddress" :cityCodes="ptCashPrePay.cityCodes"></serve-address>
      <serve-radio
        :item="servesItem"
        ref="cashServesItem"
        :serverTimes="ptCashPrePay.serverTimes"
        :isEdit="hasPtCashPrePayData"
      ></serve-radio>
      <serve-radio
        :item="waitItem"
        ref="cashWaitItem"
        :serverTimes="ptCashPrePay.waitMonths"
        :isEdit="hasPtCashPrePayData"
      ></serve-radio>
      <div class="list">
        <label>沟通确认提示文案：</label>
        <el-input
          type="textarea"
          :rows="2"
          size="medium"
          placeholder="请输入内容"
          v-model="ptCashPrePay.remark"
        ></el-input>
      </div>
      <div class="filesInput">
        <p>确认携带文件：</p>
        <el-row
          :gutter="20"
          v-for="(filesData, index) in ptCashPrePay.carryInfoList"
          :key="index"
          style="margin-bottom: 10px"
        >
          <el-col :span="6">
            <el-input width="200" type="text" v-model="filesData.name" placeholder="请输入文件名称"></el-input>
          </el-col>
          <el-col :span="10">
            <el-input width="200" type="text" v-model="filesData.link" placeholder="请输入文件模板地址"></el-input>
          </el-col>
          <el-col :span="6" v-if="index == 0">
            <el-button icon="el-icon-plus" @click="addMoreFiles"></el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="pl" v-if="goodsInfo.ptPhoneDoctor">
      <p>电话医生设置</p>
      <serve-address ref="docAddress" :cityCodes="ptPhoneDoctor.cityCodes"></serve-address>
      <serve-radio
        :item="servesItem"
        ref="docServesItem"
        :serverTimes="ptPhoneDoctor.serverTimes"
        :isEdit="hasPtPhoneDoctorData"
      ></serve-radio>
      <serve-radio
        :item="singleDurationItem"
        ref="singleDurationItem"
        :serverTimes="ptPhoneDoctor.singleDuration"
        :isEdit="hasPtPhoneDoctorData"
      ></serve-radio>
      <serve-radio
        :item="selfPayItem"
        ref="selfPayItem"
        :serverTimes="ptPhoneDoctor.selfPay"
        :isEdit="hasPtPhoneDoctorData"
      ></serve-radio>
      <serve-radio
        :item="waitItem"
        ref="docWaitItem"
        :serverTimes="ptPhoneDoctor.waitMonths"
        :isEdit="hasPtPhoneDoctorData"
      ></serve-radio>
    </div>
    <div class="list btn-submit pl">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="back" plain>返回</el-button>
    </div>
  </div>
</template>

<script>
import UserAddress from "components/address";
import serveRadio from "components/serveRadio";
import serveAddress from "components/serveAddress";
import {
  servesList,
  servesItem,
  waitItem,
  singleDurationItem,
  selfPayItem,
  ptCashPrePay,
  ptPhoneDoctor,
  goodsInfo
} from "data/goodsParams";
const queryString = require("querystring");
export default {
  name: "addOrEditGoods",
  data() {
    return {
      comName: "",
      companyId: "",
      goodsName: "",
      isEdit: "",
      goodsId: "",
      goodsPlanList: [],
      checkedServes: [],
      servesList: JSON.parse(JSON.stringify(servesList)),
      servesItem: JSON.parse(JSON.stringify(servesItem)),
      waitItem: JSON.parse(JSON.stringify(waitItem)),
      singleDurationItem: JSON.parse(JSON.stringify(singleDurationItem)),
      selfPayItem: JSON.parse(JSON.stringify(selfPayItem)),
      ptCashPrePay: JSON.parse(JSON.stringify(ptCashPrePay)),
      ptPhoneDoctor: JSON.parse(JSON.stringify(ptPhoneDoctor)),
      goodsInfo: JSON.parse(JSON.stringify(goodsInfo)),
      hasPtCashPrePayData: false,
      hasPtPhoneDoctorData: false
    };
  },
  components: {
    UserAddress,
    serveRadio,
    serveAddress
  },
  created() {
    this.init();
    this.getGoodsPlan();
    if (this.isEdit) this.getGoodsInfo();
  },
  methods: {
    addMoreFiles() {
      this.ptCashPrePay.carryInfoList.push({
        name: "",
        link: ""
      });
    },
    init() {
      const query = this.$route.query;
      this.companyName = query.companyName;
      this.companyId = query.companyId;
      this.goodsId = query.goodsId;
      this.isEdit = query.type === "edit";
      this.goodsName = this.isEdit ? query.goodsName : "新增商品";
      this.goodsInfo.companyId = this.companyId;
      if (query.goodsId) {
        this.goodsInfo.id = query.goodsId;
      } else {
        delete this.goodsInfo.id;
      }
    },
    getGoodsInfo() {
      this.axios
        .get(`/goods/${this.goodsId}`)
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            const data = res.data.data;
            console.log(data);
            for (var key in goodsInfo) {
              this.goodsInfo[key] = data[key];
            }
            this.goodsInfo.beginTime = this.timeFormater(data.beginTime).format(
              "YYYY-MM-DD"
            );
            this.goodsInfo.endTime = this.timeFormater(data.endTime).format(
              "YYYY-MM-DD"
            );
            if (data.youCashPrePayId) {
              this.setPtCashPrePay(data.youCashPrePayId);
              this.checkedServes.push("押金垫付");
            }
            if (data.youPhoneDoctorId) {
              this.setPtPhoneDoctor(data.youPhoneDoctorId);
              this.checkedServes.push("电话医生");
            }
            if (this.goodsInfo.youBodyCheck)
              this.checkedServes.push("体检服务");
            if (this.goodsInfo.youOutpatient)
              this.checkedServes.push("门诊绿通");
            if (this.goodsInfo.youHospital) this.checkedServes.push("住院绿通");
            if (this.goodsInfo.youOperation)
              this.checkedServes.push("手术绿通");
            if (this.goodsInfo.youSecondMed)
              this.checkedServes.push("二次诊疗");
            console.log(this.goodsInfo);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    setPtCashPrePay(id) {
      this.axios
        .get(`/goods/cashPrePay/${id}`)
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            const data = res.data.data;
            for (var key in this.ptCashPrePay) {
              this.ptCashPrePay[key] = data[key];
            }
            this.ptCashPrePay.carryInfoList = JSON.parse(
              this.ptCashPrePay.carryInfoList
            );
            console.log(this.ptCashPrePay.carryInfoList);
            if (
              !this.ptCashPrePay.carryInfoList ||
              !this.ptCashPrePay.carryInfoList.length
            )
              this.ptCashPrePay.carryInfoList = [{ name: "", link: "" }];
            // this.ptCashPrePayAllCity = this.ptCashPrePay.cityCodes == '-1'
            // this.ptCashPrePay.addressName = this.ptCashPrePay.cityCodes == '-1' ? [] : this.ptCashPrePay.cityCodes.split(',')
            this.hasPtCashPrePayData = true;
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    setPtPhoneDoctor() {
      this.axios
        .get(`/goods/phoneDoctor/${id}`)
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.ptPhoneDoctor = res.data.data;
            // this.ptPhoneDoctorDataAllCity = this.ptPhoneDoctor.cityCodes == '-1'
            // this.ptPhoneDoctor.addressName = this.ptPhoneDoctor.cityCodes == '-1' ? [] : this.ptPhoneDoctor.cityCodes.split(',')
            this.hasPtPhoneDoctorData = true;
            console.log(res.data.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getGoodsPlan() {
      const params = { companyId: this.companyId };
      this.axios
        .get("/goodsPlan?" + queryString.stringify(params))
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.goodsPlanList = res.data.data;
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    handleCheckedServesChange(value) {
      console.log(value);
    },
    getPtCashPrePay() {
      this.ptCashPrePay.cityCodes = this.$refs.cashAddress.getData();
      this.ptCashPrePay.serverTimes = this.$refs.cashServesItem.getData();
      this.ptCashPrePay.waitMonths = this.$refs.cashWaitItem.getData();
    },
    getPtPhoneDoctor() {
      this.ptPhoneDoctor.cityCodes = this.$refs.docAddress.getData();
      this.ptPhoneDoctor.serverTimes = this.$refs.docServesItem.getData();
      this.ptPhoneDoctor.singleDuration = this.$refs.singleDurationItem.getData();
      this.ptPhoneDoctor.selfPay = this.$refs.selfPayItem.getData() === 1;
      this.ptPhoneDoctor.waitMonths = this.$refs.docWaitItem.getData();
    },
    getParams() {
      if (this.goodsInfo.ptCashPrePay) {
        this.getPtCashPrePay();
        this.goodsInfo.ptCashPrePay = JSON.parse(
          JSON.stringify(this.ptCashPrePay)
        );
        this.goodsInfo.ptCashPrePay.carryInfoList = JSON.stringify(
          this.ptCashPrePay.carryInfoList
        );
      } else {
        delete this.goodsInfo.ptCashPrePay;
      }
      if (this.goodsInfo.youCashPrePayId >= 0)
        delete this.goodsInfo.youCashPrePayId;

      if (this.goodsInfo.ptPhoneDoctor) {
        this.getPtPhoneDoctor();
        this.goodsInfo.ptPhoneDoctor = this.ptPhoneDoctor;
      } else {
        delete this.goodsInfo.ptPhoneDoctor;
      }
      if (this.goodsInfo.youPhoneDoctorId >= 0)
        delete this.goodsInfo.youPhoneDoctorId;
      console.log(this.goodsInfo);
    },
    update() {
      this.axios
        .put(`/goods`, this.goodsInfo)
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.$message(this.mes.success);
            this.$router.back();
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    add() {
      delete this.goodsInfo.reason;
      this.axios
        .post("/goods", this.goodsInfo)
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.$message(this.mes.success);
            this.$router.back();
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    submit() {
      this.getParams();
      if (this.isEdit) {
        this.update();
      } else {
        this.add();
      }
    },
    back() {
      this.$router.back();
    }
  },
  watch: {
    checkedServes(value, oldVal) {
      this.goodsInfo.youBodyCheck = value.indexOf("体检服务") > -1 ? 1 : 0;
      this.goodsInfo.youOutpatient = value.indexOf("门诊绿通") > -1 ? 1 : 0;
      this.goodsInfo.youHospital = value.indexOf("住院绿通") > -1 ? 1 : 0;
      this.goodsInfo.youOperation = value.indexOf("手术绿通") > -1 ? 1 : 0;
      this.goodsInfo.youSecondMed = value.indexOf("二次诊疗") > -1 ? 1 : 0;
      this.goodsInfo.ptCashPrePay = value.indexOf("押金垫付") > -1 ? 1 : 0;
      this.goodsInfo.ptPhoneDoctor = value.indexOf("电话医生") > -1 ? 1 : 0;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("../../../assets/less/input.less");
.contianer {
  padding-left: 10px;
  text-align: left;
}
.title {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 5px;
}
.pl {
  padding-left: 36px;
}
.btn-submit {
  margin-top: 40px;
}
.width.el-input {
  width: 70px;
}
</style>